<!-- 仓库配置页面 -->
<template>
    <div class="alarmConfiguration zy-content ">
        <!-- 搜索 -->
        <div class="searchBox search-box-layout">
            <Row :gutter="24">
                <Col span="4">
                <div>
                    <p class="label">物料编号</p>
                    <div class="ipt">
                        <Input type="text" v-model="searchParams.materialCode" clearable
                            :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                    </div>
                </div>
                </Col>
                <Col span="4">
                <div>
                    <p class="label">物料名称</p>
                    <div class="ipt">
                        <Input type="text" v-model="searchParams.materialName" clearable
                            :placeholder="`${$t('common.inputInfo')}`" :maxlength="32"></Input>
                    </div>
                </div>
                </Col>
                <Col span="4">
                <div>
                    <p class="label hide-label">--</p>
                    <div class="ipt">
                        <Button class="search-btn" type="primary" @click="changeNum()">
                            {{ $t('common.Query') }}
                        </Button>
                        <Button class="reset-btn" @click="reset()">
                            {{ $t('common.reset') }}
                        </Button>
                    </div>
                </div>
                </Col>
            </Row>
        </div>
        <div class="list-layout mt16">
            <!-- 批量删除 批量导出  批量导入 下载模板 新增-->
            <div class="btns clear">
                <span class="title">{{ $t('common.listInformation') }}</span>
                <Button @click="exportTemplateClick">{{ $t('common.batchExport') }}</Button>
                <Button @click="getTableColumns(columns)">
                    {{ handleContextMenuStatus ? $t('显示操作栏') : $t('隐藏操作栏') }}
                </Button>
            </div>
            <!-- 表格 -->
            <div class="tableContent">
                <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columnsList"
                    ellipsis ref="selection" stripe :data="dataArr" @on-selection-change="onSelectChange">
                    <template slot-scope="{ row }" slot="locationNum">
                        <span class="row_click" @click="showRowDetail(row)">{{ row.locationNum }}</span>
                    </template>
                </Table>
            </div>
            <!-- 分页 -->
            <div class="pageWrap mt16">
                <pageLeftTitle :total="total" :selected="delIds.length" />
                <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
                    @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
            </div>
        </div>
        <!-- 新增编辑 -->
        <Modal :mask-closable="false" v-model="create" :title="addtitle" class="modal-content-layout">
            <Form ref="form" class="formList" :model="formItem" label-position="top" :rules="ruleValidate">
                <FormItem :label="$t('common.company')" prop="companyId">
                    <Select v-model="formItem.companyId" filterable clearable :placeholder="`${$t('common.selectInfo')}`"
                        @on-change="getBackupList($event)">
                        <Option v-for="(item) of wareHouseList" :value="item.id" :key="item.code" :label="item.name">
                        </Option>
                    </Select>
                </FormItem>
                <FormItem :label="$t('common.WarehouseNo')" prop="backupNo">
                    <Input type="text" v-model="formItem.backupNo" :placeholder="`${$t('common.inputInfo')}`"
                        :maxlength="32"></Input>
                </FormItem>
                <FormItem :label="$t('common.Warehouse')" prop="backupName">
                    <Input type="text" v-model="formItem.backupName" :placeholder="`${$t('common.inputInfo')}`"
                        :maxlength="32"></Input>
                </FormItem>
                <FormItem :label="$t('common.administrators')" prop="manageBy">
                    <Select v-model="formItem.manageBy" filterable clearable :placeholder="`${$t('common.inputInfo')}`">
                        <Option v-for="(item, index) of createByOptions" :value="item.id" :key="index"
                            :label="item.showName"></Option>
                    </Select>
                </FormItem>
                <FormItem :label="$t('common.remarks')" prop="remark">
                    <Input type="textarea" v-model="formItem.remark" :placeholder="`${$t('common.inputInfo')}`"
                        :autosize="{ minRows: 2, maxRows: 5 }"></Input>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" @click="create = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="loading" @click="addOk('form')">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
        <!-- 请确认是否删除弹框 -->
        <Modal :mask-closable="false" v-model="delFaultCodeShowF" :title="$t('common.Delete')" class="modal-title-layout">
            <div class="icon red">
                <i class="iconfont zy-common-shanchu"></i>
            </div>
            <p class="title">
                <span>{{ $t('common.confirmDelete') }}</span>
            </p>
            <div slot="footer">
                <Button type="default" @click="delFaultCodeShowF = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" :loading="loading" @click="deleteOk">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
        <Modal :mask-closable="false" v-model="showDetailDialog" title="所在位置" class="modal-content-layout" width="55%">
            <div class="alarmConfiguration">
                <div class="list-layout2">
                    <!-- 表格 -->
                    <div class="tableContent mt14">
                        <!-- {{ dataArr2 }}{{ delIds2 }} -->
                        <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
                            :columns="columns2" ellipsis ref="selection" stripe :data="dataArr2"
                            @on-selection-change="onSelectChange2">
                        </Table>
                    </div>
                    <!-- 分页 -->
                    <div class="pageWrap mt16">
                        <pageLeftTitle :total="total2" :selected="delIds2.length" />
                        <Page :total="total2" :page-size="pageSize2" :page-size-opts="pageSizeOption" :current="pageNum2"
                            @on-change="changePageNum2" @on-page-size-change="changePageSize2" show-sizer show-total />
                    </div>
                </div>
            </div>
            <div slot="footer">
                <Button type="default" @click="showDetailDialog = false">{{
                    $t("common.Cancle")
                }}</Button>
                <Button type="primary" :loading="loading" @click="showDetailDialog = false">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { deleteApi, templateApi, exportApi } from "@/api/spareParts/storeHouse.js";
import { getUserSelect, getBackup, findOrgByToken } from "@/api/index.js";
import fileDownload from 'js-file-download';
import toggleTableOperation from "@/mixins/toggleTableOperation";
import recursion from "@/util/recursion";
export default {
    name: "recyclable",//、、
    mixins: [toggleTableOperation],
    data() {
        return {
            wareHouseList: [],
            showDetailDialog: false,
            backupList: [],
            shelfList: [],
            locationList: [],
            importExcelState: false, /*批量导入*/
            formItem: {},
            addtitle: "",
            allCheck: false,
            loading: false,
            create: false,
            searchParams: {},
            pageNum: 1,
            pageSize: 10,
            total: 0,

            pageNum2: 1,
            pageSize2: 10,
            total2: 0,

            columns: [
                {
                    key: 'selection',
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '物料编号',
                    key: 'materialCode',
                    minWidth: 100,
                    align: 'center',
                    resizable: true
                },
                {
                    title: '物料型号',
                    key: 'materialModel',
                    minWidth: 100,
                    align: 'center',
                    resizable: true
                },
                {
                    title: '物料名称',
                    key: 'materialName',
                    minWidth: 100,
                    align: 'center',
                    resizable: true
                },
                {
                    title: '物料类型',
                    key: 'materialType',
                    minWidth: 100,
                    align: 'center',
                    resizable: true
                },
                {
                    title: '所在位置',
                    key: 'locationNum',
                    minWidth: 100,
                    slot: 'locationNum',
                    align: 'center',
                    resizable: true
                },
            ],
            columns2: [
                // {
                //     key: "selection",
                //     type: "selection",
                //     width: 60,
                //     align: "center",
                // },
                {
                    title: "序号",
                    key: "index",
                    type: "index",
                    width: 100,
                    align: "center",
                },
                {
                    title: "所在位置",
                    key: "locationName",
                    minWidth: 200,
                    align: "center",
                    resizable: true,
                    tooltip: true,
                },
                {
                    title: "数量",
                    key: "quantity",
                    minWidth: 200,
                    align: "center",
                    resizable: true,
                    tooltip: true,
                },
            ],
            orgList: [],//功能位置
            dataArr: [{ test: '123123' }],
            dataArr2: [],
            delFaultCodeShowF: false,//是否显示删除弹窗
            pageSizeOption: [10, 20, 30, 40],
            delIds: [],
            delIds2: [],
            selection: [],
            checkBtnPermission: {},
            createByOptions: [],
            ruleValidate: {
                companyId: [
                    { required: true, message: '请选择公司', trigger: 'blur', type: 'number' }
                ],
                backupNo: [
                    { required: true, message: '请填写仓库编号', trigger: 'blur', type: 'string' }
                ],
                backupName: [
                    { required: true, message: '请填写仓库名称', trigger: 'blur', }
                ],
                manageBy: [
                    { required: true, message: '请选择管理员', trigger: 'blur', type: "number", }
                ],
            }
        }
    },
    mounted() {
        this.getTableColumnsWidth(this.columns)
        this.searchList();
        // 基础数据，字典数据
        // this.getOrgList()
        // this.getDicData('物料类型', this.dicDataList)
        // this.getWareHouseList();
        // this.getUserList();
    },
    watch: {
    },
    methods: {
        getDicData(name, data) {
            let dataList = data;
            this.axios({
                url: '/dms/faultCategory/dictList',
                method: 'get',
                params: {
                    name,
                }
            }).then(res => {
                if (res.code == 200) {
                    dataList = res.data
                }
            })

        },
        showRowDetail(row) {
            this.axios({
                url: '/dms/recyclablePackaging/getPositionList',
                method: 'post',
                data: {
                    pageNum: 1,
                    pageSize: 999,
                    recyclableId:row.id,
                }
            }).then(res => {
                if (res.code == 200) {
                    this.dataArr2 = res.data.records;
                    this.total2 = res.data.total;
                    this.showDetailDialog = true
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        //获取公司
        getWareHouseList() {
            // this.axios({
            //     url: this.apiList.wareHouse.wareHouseList,
            //     method: 'post',
            //     data: this.searchParams
            // }).then(res => {
            //     if (res.code === 200) {
            //         this.wareHouseList = res.data
            //     } else {
            //         this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
            //     }
            // })
        },
        getOrgList() {
            let params = {
                level: 0,
            };
            findOrgByToken(params).then((res) => {
                if (res.code === 200) {
                    const obj = {
                        label: "name",
                        value: "code",
                        children: "children",
                    };
                    this.orgList = recursion.convertTree(res.data, obj);
                } else {
                    this.$Message.warning({
                        content: res.msg,
                        duration: 6,
                        closable: true,
                    });
                }
            });
        },
        //获取仓库
        getBackupList(data) {
            // if(!this.searchParams.companyId){
            //     this.$Message.warning(({ content:"请先选择公司", duration: 6, closable: true }));
            //     return false;
            // }
            let params = {
                companyId: data
            }
            getBackup(params).then(res => {
                if (res.code === 200) {
                    this.backupList = res.data
                }
                // else {
                //     this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                // }
            }).finally(() => {
                this.loading = false
            })
        },
        //获取管理员
        getUserList() {
            getUserSelect().then(res => {
                if (res.code === 200) {
                    this.createByOptions = res.data.map(item => {
                        return {
                            ...item,
                            showName: item.empno + '----' + item.username
                        }
                    })
                } else {
                    this.createByOptions = []
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            }).finally(() => {
                this.loading = false
            })
        },
        reset() {
            this.searchParams = {};
            this.changeNum();
        },
        //分页
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },

        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        changePageSize2(pageSize) {
            this.pageSize2 = pageSize;
            this.searchList2();
        },
        //查询列表
        searchList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ...this.searchParams
            };
            this.axios({
                method: 'post',
                url: '/dms/recyclablePackaging/getRecyclablePackagingList',
                data: params,
            }).then(res => {
                
                if (res.code === 200) {
                    this.dataArr = res.data.records
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                }
            })
        },
        //增加或编辑
        createfaultCodeShowH(row) {
            this.$refs.form.resetFields();
            if (row.id) {
                this.addtitle = `${this.$t('common.Edit')}`,
                    this.formItem = {
                        ...row,
                    }
            } else {
                this.addtitle = `${this.$t('common.New')}`
                this.formItem = {
                    companyId: null,
                    backupNo: '',
                    backupName: "",
                    manageBy: null
                };
            }
            this.create = true;
        },
        addOk(name) {
            // if (this.formItem.companyId) {
            //     this.formItem.companyName = this.wareHouseList.map(
            //         (item, index) => {
            //             if (this.formItem.companyId == item.id) {
            //                 return item.name
            //             }
            //         }
            //     )

            //     this.formItem.companyName = this.formItem.companyName[0];
            // }
            this.$refs[name].validate((valid) => {
                if (!valid) {
                    return
                } else {
                    this.loading = true;
                    if (this.formItem.id) {
                        this.axios({
                            url: `/backup/update`,
                            method: 'post',
                            data: this.formItem
                        }).then(res => {
                            this.loading = false; 0
                            if (res.code === 200) {
                                this.changeNum();
                                this.$Message.success("编辑成功");
                                this.create = false;
                            } else {
                                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                            }
                        })
                    } else {
                        this.axios({
                            url: `/backup/add`,
                            method: 'post',
                            data: this.formItem
                        }).then(res => {
                            this.loading = false;
                            if (res.code === 200) {
                                this.changeNum();
                                this.$Message.success("新增成功");
                                this.create = false;
                            } else {
                                this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                            }
                        })
                    }
                }
            })

        },
        //勾选列表
        onSelectChange(selection) {
            let myArray = [];
            selection.map((item, index) => {
                myArray.push(item.id);
            });
            this.delIds = myArray;
            if (selection.length > 0) {
                this.allCheck = true;
            } else {
                this.allCheck = false;
            }
        },
        //批量删除
        delFaultCodeShowClick() {
            if (this.delIds.length == 0) {
                this.$Message.warning({
                    content: `${this.$t('common.deleteItems')}`,
                    duration: 6,
                    closable: true,
                });
                return;
            } else {
                this.delFaultCodeShowF = true;
            }
        },
 
        importExcelChange(val) {
            this.importExcelState = false;
            if (val === 'success') {
                this.changeNum();
            }
        },
        //导出
        exportTemplateClick() {
            let params = {
                delIds: this.delIds,
            };
            // for (let key in this.searchParams) {
            //     if (this.searchParams[key]) {
            //         this.$set(params, key, this.searchParams[key])
            //     }
            // }
            const filName = '可回收包材库明细'
            this.axios({
                url:'/dms/recyclablePackaging/export',
                method: 'post',
                responseType: 'blob',
                data: params
            }).then(res => {
                fileDownload(res, filName + '.xlsx')
            })
        }
    }
}
</script>

<style scoped lang="scss">
.ivu-input-number {
    width: -webkit-fill-available;
}

.row_click {
    cursor: pointer;
    color: rgb(50, 113, 240) !important;
}
</style>